<template>
  <div class="banner">
    <div @click="changeflag">
      <swiper :options="swiperOptions">
        <swiper-slide>
          <img class="swiperimg"
               src="https://img1.qunarzz.com/vs_ceph_b2c_001/6e8aa1e6-09ba-46a8-beba-8415f377d406.jpg_r_1280x840x95_ede02e41.jpg">
        </swiper-slide>
        <swiper-slide>
          <img class="swiperimg"
               src="https://img1.qunarzz.com/vs_ceph_b2c_001/4812d1ec-a051-43dd-9236-bb52fb2be16a.jpg_r_1280x840x95_23bf60e3.jpg">
        </swiper-slide>
      </swiper>
    </div>
    <div class="picture-num">
      <span class="picture">✉</span>
      <span class="num">2</span>
    </div>
    <div class="img-swiper"
         v-show="flag"
         @click="changeflag">
      <swiper :options="swiperOptions">
        <swiper-slide>
          <img class="show-img"
               src="https://img1.qunarzz.com/vs_ceph_b2c_001/6e8aa1e6-09ba-46a8-beba-8415f377d406.jpg_r_1280x840x95_ede02e41.jpg">
        </swiper-slide>
        <swiper-slide>
          <img class="show-img"
               src="https://img1.qunarzz.com/vs_ceph_b2c_001/4812d1ec-a051-43dd-9236-bb52fb2be16a.jpg_r_1280x840x95_23bf60e3.jpg">
        </swiper-slide>
      </swiper>
      <div class="fraction-in">
        <div class="swiper-pagination"
             slot="pagination">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      flag: false,
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction'
        },
      },
    }
  },
  methods: {
    changeflag () {
      this.flag = !this.flag;
    }
  },
}
</script>
<style scoped>
.banner {
  position: relative;
}

.swiperimg {
  width: 100%;
}
.picture-num {
  position: absolute;
  display: block;
  top: 4.3rem;
  left: 6.3rem;
  height: 0.5rem;
  line-height: 0.5rem;
  width: 1rem;
  font-size: 0.35rem;
  text-align: center;
  background: black;
  color: #fff;
  border-radius: 0.1rem;
  opacity: 0.5;
  z-index: 5;
}
.picture-num .picture {
  vertical-align: bottom;
}
.picture-num .num {
  font-size: 0.28rem;
}
.swiper-pagination,
.swiper-pagination-fraction {
  position: absolute;
  top: 8.4rem;
  left: 6.3rem;
  font-size: 0.28rem;
  color: #fff;
  display: block;
  height: 0.5rem;
  width: 1rem;
  background: black;
  line-height: 0.5rem;
  border-radius: 0.15rem;
  opacity: 0.5;
  z-index: 985;
}
.img-swiper {
  background: black;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 667px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 985;
}
.img-swiper .show-img {
  width: 100%;
}
</style>